<script setup lang="ts">
const option = {
  radar: {
    shape: 'circle',
    splitNumber: 5,
    axisName: {
      color: '#ccc',
    },
    indicator: [
      { name: 'Type1', max: 120 },
      { name: 'Type2', max: 120 },
      { name: 'Type3', max: 120 },
      { name: 'Type4', max: 120 },
      { name: 'Type5', max: 120 },
      { name: 'Type6', max: 120 },
    ],
  },
  series: [
    {
      type: 'radar',
      smooth: true,
      Symbol: 'none',
      lineStyle: {
        // color: 'tranparent',
        width: 5,
        cap: 'round',
        smooth: true,
        join: 'round',
      },
      itemStyle: {
        lineStyle: {
          // color: 'tranparent',
          width: 100,
          cap: 'square',
          join: 'miter',
          miterLimit: '100',
        },
        opacity: 0.2,
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 1, color: '#0093f9', // 0% 处的颜色
          }, {
            offset: 0, color: '#37c3fe', // 100% 处的颜色
          }],
        },
        opacity: 0.8,
      },
      // lineStyle: {
      //   color: 'transparent',
      // },
      data: [
        {
          value: [80, 120, 95, 80, 90, 78],
        },
      ],
    },
  ],
};
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
  />
</template>

  <style scoped>
  </style>
